<div class="department-section ptb80">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="heading-title">{$config.title}</h1>
                <h4 class="sub-title mb60">{$config.secondTitle}</h4>
            </div>
            <div class="col-md-8">
                <div class="row" role="tablist">
                    {volist name="lists" id="data"}
                    <div class="col-md-6 col-sm-6">
                        <div class="row">
                            <div class="col-md-3 col-sm-3 department-inner-icon">
                                <i class="iconmed-oralhealth department-icon"></i>
                            </div>
                            <div class="col-md-9 col-sm-9">
                                <h2><a href="#{$data.title}" aria-controls="{$data.title}" role="tab" data-toggle="tab">{$data.title}</a></h2>
                                <p class="mb60">{$data.second_title}</p>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
            <div class="col-md-4">
                <div class="tab-content">
                    {volist name="lists" id="data" length="1"}
                    <div role="tabpanel" class="tab-pane active" id="{$data.title}">
                        <div class="department-right-box">
                            <div class="department-right-box-icon"><i class="fa {$data.icon} department-icon"></i></div>
                            <div class="department-right-box-content">
                                <h1>{$data.title}</h1>
                                <p>{$data.second_title}</p>
                                <a href="#" class="btn btn-default mt50">Book appoinment</a>
                            </div>
                        </div>
                    </div>
                    {/volist}
                    {volist name="lists" id="data" offset="1"}
                    <div role="tabpanel" class="tab-pane active" id="{$data.title}">
                        <div class="department-right-box">
                            <div class="department-right-box-icon"><i class="fa {$data.icon} department-icon"></i></div>
                            <div class="department-right-box-content">
                                <h1>{$data.title}</h1>
                                <p>{$data.second_title}</p>
                                <a href="#" class="btn btn-default mt50">Book appoinment</a>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
        </div>
    </div>
</div>
